<template>
  <div class="vm-common-statistics">
    <div class="sourcing-container-header">
      <h5 class="container-h-t">
        <i class="saa-icon screen" @click="openPopup"></i>
        <span id="current-selected-time">{{ curMonthStart }}~{{ curMonthEnd }}</span>
      </h5>
    </div>
    <div class="sourcing-container-body">
      <h5 class="container-b-t">
        采购金额占比（元）
      </h5>
      <div id="sourcing-main"></div>
    </div>
    <div id="sourcingFooter" class="sourcing-container-footer">
      <div class="sourcing-warp-item" v-for="(item,key) in new_data" :key="key">
        <div class="item-warp-left">
          <i :class="['saa-icon', item.iconClass]"></i>
          <div>
            <span>{{ item.name }}</span>
            <p>{{ item.contract_num }}份合同</p>
          </div>
        </div>
        <div class="item-warp-center">
          <span>{{ item.percent }}</span>
        </div>
        <div class="item-warp-right">
          <span>{{ item.value }}</span>
        </div>
      </div>
    </div>

    <!-- 筛选弹框 -->
    <vm-common-search-popup
    type="sourcePage"
    :ScreenData="data"
    ref="popupWapper"></vm-common-search-popup>
  </div>
</template>

<script>
  import echarts from 'echarts'
  import { source_money_ratio_APP } from '@/api/statistics_analysis'
  import { getCurMonth, getCountDays } from '@/utils/vm-common-getTime.js'
  import vmCommonSearchPopup from '@/components/vm-common-search-popup'
  import { mapState } from 'vuex'
  export default {
    data() {
      return {
        data: {
          month: [{ month: '一月', value: 1, isActive: false},
            { month: '二月', value: 2, isActive: false},
            { month: '三月', value: 3, isActive: false},
            { month: '四月', value: 4, isActive: false},
            { month: '五月', value: 5, isActive: false},
            { month: '六月', value: 6, isActive: false},
            { month: '七月', value: 7, isActive: false},
            { month: '八月', value: 8, isActive: false},
            { month: '九月', value: 9, isActive: false},
            { month: '十月', value: 10, isActive: false},
            { month: '十一月', value: 11, isActive: false},
            { month: '十二月', value: 12 , isActive: false}],
        },
        curMonthStart: getCountDays(getCurMonth(),1,2),
        curMonthEnd: getCountDays(getCurMonth(),2,2)
      }
    },
    mounted() {
      this.getsource_analysis(true);
    },
    computed :{
      ...mapState({
        new_data: state => state.statistics_analysis.newSourceData,
        currentMouth: state => state.statistics_analysis.currentMouth,
        sum: state => state.statistics_analysis.sum
      })
    },
    watch: {
      currentMouth : function (newV) {
        this.getsource_analysis(false);
        this.curMonthStart = getCountDays(newV,1,2);
        this.curMonthEnd = getCountDays(newV,2,2);
      }
    },
    methods: {
      async getsource_analysis(flag) {
        // flag 表示是否第一次进入
        if (flag) {
          let startTime = getCountDays(getCurMonth(),1,1);
          let endTime = getCountDays(getCurMonth(),2,1);
          let month = getCurMonth();
          await this.$store.dispatch('getSourceMoneyRatio', {startTime, endTime, month});
        }
        let sourcing_main = echarts.init(document.getElementById('sourcing-main'));
        sourcing_main.clear();
        sourcing_main.setOption({
          tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
          },
          series: [
            {
              name: '采购金额占比',
              type: 'pie',
              radius: ['50%', '70%'],
              avoidLabelOverlap: false,
              label: {
                normal: {
                  show: true,
                },
              },
              labelLine: {
                normal: {
                  show: true
                }
              },
              data: this.new_data
            },
            {
              z: 1,
              radius: ['0%', '0%'],
              type: 'pie',
              data: [
                {
                  name: this.sum,
                  tooltip: { //提示框
                    show: false,
                  },
                  labelLine: {
                    normal: {
                      show: true
                    }
                  },
                  label: {
                    normal: {
                      show: true,
                      position: 'center',
                      textStyle: {
                        color: '#7d7d7d',
                        fontSize: '16',
                        lineHeight: '60',
                      }
                    }
                  }
                },
                {
                  value: 0,
                  name: '—' + '元' + '—',
                  tooltip: { //提示框
                    show: false,
                  },
                  label: {
                    normal: {
                      position: 'center',
                      show: true,
                      textStyle: {
                        fontSize: '16',
                        color: '#6b6b6b'
                      }
                    }
                  },
                  itemStyle: {
                    normal: {
                      color: 'rgba(300,300,300,1)',
                      shadowBlur: 5,
                      shadowColor: 'rgba(0,176,255,1)'
                    }
                  }
                }
              ]
            }
          ]
        });
      },
      // 打开模态框
      openPopup () {
        this.$refs.popupWapper.init();
      },
    },
    components: {
      'vm-common-search-popup': vmCommonSearchPopup
    }
  }
</script>

<style lang="scss" scoped>
  /* 采购分析模块 */
  .vm-common-statistics {
    font-size: 22px;
    padding: 0 35px 40px 35px;
    .sourcing-container-header {
      .container-h-t {
        height: 1.4rem;
        line-height: 1.4rem;
        font-size: 0.293333rem;
        color: #969696;
        text-align: center;
        position: relative;
        .screen {
          background-position: -1.96rem -0.026666rem;
          width: 0.4rem;
          height: 0.426666rem;
          position: absolute;
          top: 0.466666rem;
          right: 0;
        }
      }
    }

    .sourcing-container-body {
      width: 100%;
      background-color: #f4f4f4;
      height: 8.786666rem;
      padding: 0 0.266666rem 0 0.2rem;
      margin-bottom: 1.2rem;
      .container-b-t {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        height: 1.333333rem;
        font-size: 0.426666rem;
        line-height: 1.333333rem;
        color: #787878;
        border-bottom: 1px solid #e5e5e5;
        position: relative;
        &::before {
          content: '';
          background: url(../../../static/images/saa_Spirit.png) no-repeat;
          background-size: 4rem 4.48rem;
          display: inline-block;
          vertical-align: middle;
          background-position: 0 0;
          width: 0.466666rem;
          height: 0.466666rem;
          margin-right: 0.133333rem;
          top: 0;
          left: 0;
          line-height: 1.333333rem;
        }
      }
      #sourcing-main {
        width: 100%;
        height: 557px;
      }
    }

    .sourcing-container-footer {
      border-top: 2px solid #e5e5e5;
      .sourcing-warp-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.466666rem 0.266666rem 0.466666rem 0.133333rem;
        border-bottom: 1px solid #e5e5e5;
        .item-warp-left {
          display: flex;
          align-items: center;
          width: 35%;
          div {
            text-align: left;
            span,
            p {
              font-size: 0.346666rem;
              color: #7d7d7d;
            }
          }
        }
        .item-warp-center {
          width: 30%;
          text-align: center;
          span {
            font-size: 0.32rem;
            color: #7e7e7e;
          }
        }
        .item-warp-right {
          width: 35%;
          text-align: right;
          span {
            color: #e37571;
            font-size: 0.32rem;
          }
        }
      }
    }
  }

  .sourcing-container-footer i.saa-icon {
    width: 0.773333rem;
    height: 0.773333rem;
    margin-right: 0.333333rem;
  }

  .sourcing-container-footer i.saa-icon.money {
    background-position: -2.4rem 0;
  }

  .sourcing-container-footer i.saa-icon.competitive-price {
    background-position: -2.426666rem -0.76rem;
  }

  .sourcing-container-footer i.saa-icon.bid {
    background-position: -2.453333rem -1.533333rem;
    height: 0.68rem;
  }

  .sourcing-container-footer i.saa-icon.competitive {
    background-position: -2.48rem -2.306666rem;
    height: 0.626666rem;
  }

  .sourcing-container-footer i.saa-icon.Single {
    background-position: -2.47rem -3.133333rem;
    height: 0.453333rem;
  }

  .sourcing-container-footer i.saa-icon.other {
    height: 0.653333rem;
    background-position: -2.466666rem -3.786666rem;
  }
</style>
